<template>
  <div style="margin-top:70px">
    <el-row :gutter="20">
      <el-col :span="23"><div class="grid-content bg-purple">
        <el-form ref="form" :model="form" label-width="80px" class="formElement">
          <el-form-item label="车型编号:">
            <el-input v-model="form.truckTypeId" style="width:350px" placeholder="请输入车辆编号" />
          </el-form-item>
          <el-form-item label="应载重量:">
            <el-select v-model="form.allowableLoad" style="width:350px" placeholder="请选择应载重量" />
          </el-form-item>
          <el-form-item label="应载体积:">
            <el-select v-model="form.allowableVolume" style="width:350px" placeholder="请选择应载体积" />
          </el-form-item>
        </el-form>
        <el-form class="formItem" label-width="80px" :model="form">
          <el-form-item label="车辆类型:" class="forItem-one">
            <el-input v-model="form.truckTypeName" style="width:350px" placeholder="请输入车辆型号" />
          </el-form-item>
          <el-form-item class="forItem-two">
            <el-button type="danger">搜索</el-button>
          </el-form-item>
          <el-form-item class="forItem-three">
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div></el-col>
      <el-col :span="23"><div class="grid-content bg-purple">
        <div class="main">
          <div class="title">
            <el-button type="danger" size="medium" @click="dialogVisible=true">新增车型</el-button>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%"
            class="table"
            :stripe="true"
          >
            <el-table-column
              type="index"
              label="序号"
              width="180"
            />
            <el-table-column
              prop="transportType"
              label="车型编号"
              width="180"
            />
            <el-table-column
              prop="name"
              label="车辆类型"
            />
            <el-table-column
              prop="num"
              label="车型数量"
            />
            <el-table-column
              prop="allowableLoad"
              label="应载重量(吨)"
            />
            <el-table-column
              prop="allowableVolume"
              label="应载体积(立方米)"
            />
            <el-table-column
              prop="measureLong"
              label="长(米)"
            />
            <el-table-column
              prop="measureWidth"
              label="宽(米)"
            />
            <el-table-column
              prop="measureHigh"
              label="高(米)"
            />
            <el-table-column
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
                |
                <el-button type="text" size="small" style="color:red" @click="hdel(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table></div>
      </div></el-col>
    </el-row>
    <el-dialog
      :visible="dialogVisible"
      width="650px"
      title="新增车型"
      close-on-press-escape
      @close="dialogVisible=false"
    >

      <el-form ref="form" :model="form" label-width="150px" :rules="rules">
        <el-form-item label="车辆类型" prop="templateType">
          <el-input v-model="form.templateType" placeholder="请输入车辆类型" style="width:350px" /></el-form-item>
        <el-form-item label="应载重量" prop="transportType">
          <el-input v-model="form.templateType" placeholder="请输入应载重量" style="width:350px" /></el-form-item>
        <el-form-item label="应载体积" prop="associatedCityList">
          <el-input v-model="form.templateType" placeholder="请输入车型体积" style="width:350px" /></el-form-item>
        <el-form-item label="长" prop="firstWeight">
          <el-input style="width:350px" value="0.0" />
        </el-form-item>
        <el-form-item label="宽" prop="continuousWeight">
          <el-input value="0.0" style="width:350px" />
        </el-form-item>
        <el-form-item label="高" prop="lightThrowingCoefficient">
          <el-input value="0.0" style="width:350px" />
        </el-form-item>
        <el-form-item label-width="200px" style="margin-top:50px">
          <el-button type="danger">确定</el-button>
          <el-button style="margin-left:50px" @click="hclose">取消</el-button>
        </el-form-item>
      </el-form></el-dialog>
  </div>
</template>

<script>
import { getCarInfo } from '@/api/carmanagement'
export default {
  data() {
    return {
      formData: {

      },

      form: {
        truckTypeId: '',
        allowableLoad: '',
        allowableVolume: '',
        truckTypeName: ''
      },
      tableData: [],
      dialogVisible: false

    }
  },
  created() {
    this.loadCarInfo()
  },
  methods: {
    async  loadCarInfo() {
      const res = await getCarInfo()
      console.log(res)
      this.tableData = res.data
    },
    hclose() {
      this.dialogVisible = false
    }
  }

}
</script>

<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;

    margin:0 20px 20px ;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #fff;
    padding: 30px 30px 10px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .formElement{
    display: flex;
    justify-content: space-around;
  }
  .formItem{
     display: flex;
     .forItem-one{
      margin-left: 48px;
     }
     .forItem-two{
      margin-left: -20px;
     }
     .forItem-three{
      margin-left: -20px;
     }

  }
</style>
